<template>
	<view class="bg">
		<!-- 顶部导航部分 -->
		<view>
			<carHeader :title="'卡券管理'"></carHeader>
		</view>

		<!-- 新增优惠卷 -->
		<view class="youhiujuan" @click="addCard()">
			<image src="/static/加号@2x.png"></image>
			<view class="add">新增优惠劵</view>
		</view>

		<!-- 卡片内容 -->
		<view class="cardContent">
			<view class="choose">
				<view class="rectangle">
					<div class="one" :class="{ 'item' : true, 'active' : cardIndex}" @click="changeColor1">
						<span>进行中</span>
					</div>
					<div class="two" :class="{ 'item' : true, 'active' : !cardIndex}" @click="changeColor2">
						<span>已结束</span>
					</div>
				</view>

			</view>
			<div class="card">
				<uni-card>
					<div v-if="cardIndex">
						<view class="content">
							<!-- 进行中的优惠卷 -->
							<view class="content-text1" v-for="(item,index) in cardingList" :key="index">
								<!-- 左边部分 -->
								<view class="left">
									<view class="discount">满{{item.couTriggerMoney}}元可用</view>
									<view class="money">
										<view class="fuhao">￥</view>
										<view class="number">{{item.couPreferentialMoney}}</view>
									</view>
								</view>

								<!-- 右边部分 -->
								<view class="right">
									<view class="discountname">优惠卷名称:{{item.couName}}</view>
									<view>有效期:{{item.couExpirationStart}}-{{item.couExpirationEnd}}</view>
									<view class="limitone">每人限领{{item.couSize}}张</view>
								</view>
							</view>

						</view>
					</div>
					<div v-if="!cardIndex">
						<view class="content1">
							<!-- 已结束的优惠卷 -->
							<view class="content-text11" v-for="(item,index) in endingList" :key="index">
								<!-- 左边部分 -->
								<view class="left1">
									<view class="discount1">满{{item.couTriggerMoney}}元可用</view>
									<view class="money1">
										<view class="fuhao1">￥</view>
										<view class="number1">{{item.couPreferentialMoney}}</view>
									</view>
								</view>

								<!-- 右边部分 -->
								<view class="right1">
									<view class="discountname1">优惠卷名称:{{item.couName}}</view>
									<view>有效期:{{item.couExpirationStart}}-{{item.couExpirationEnd}}</view>
									<view class="limitone1">每人限领{{item.couSize}}张</view>
									<!-- 已结束的标志 -->
									<image :src="item.imgPath"></image>

								</view>
							</view>
						</view>
					</div>
				</uni-card>
			</div>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardIndex: true,
				index: 0,
				index1: "",
				cardingList: [],
				endingList: [],
				// cardingList: [{
				// 	leftCardTop: 200,
				// 	leftCardButtom: 20,
				// 	rightCardTop: "新用户专项体验卷",
				// 	beginTime: "2020.3.18",
				// 	endTime: "2023.4.18",
				// 	num: 1
				// }],
				// endingList: [{
				// 	leftCardTop: 200,
				// 	leftCardButtom: 20,
				// 	rightCardTop: "新用户专项体验卷",
				// 	beginTime: "2020.3.18",
				// 	endTime: "2020.4.18",
				// 	num: 1,
				// 	imgPath: "/static/已结束.png"
				// }]
			}
		},
		onLoad() {
			this.searchStarList();
		},

		methods: {
			changeColor1() {
				if (this.cardIndex != true) {
					this.cardIndex = !this.cardIndex;
				}
				this.searchStarList();

			},
			changeColor2() {
				if (this.cardIndex == true) {
					this.cardIndex = !this.cardIndex;
				}
				this.searchEndList();

			},
			searchStarList() {
				console.log('获取进行中优惠券列表');
				const that = this;
				uni.request({
					url: 'http://localhost:8080/carShopService/coupon/list',
					data: {
						couStatus: 0,
					},

					success(res) {
						console.log(res);
						console.log('数据如上获取成功');
						that.cardingList = res.data.rows;
						console.log(that.cardingList);
					}
				})
			},
			searchEndList() {
				console.log('获取已结束优惠券列表');
				const that = this;
				uni.request({
					url: 'http://localhost:8080/carShopService/coupon/list',
					data: {
						couStatus: 1,
					},

					success(res) {
						console.log(res);
						console.log('数据如上获取成功');
						that.endingList = res.data.rows;
						console.log(that.endingList);
					}
				})
			},
			addCard() {
				uni.navigateTo({
					url: "../../pages/offering_coupons/offering_coupons"
				});
			},


		},
		computed: {

		}
	}
</script>

<style>
	.bg {
		position: relative;
		background-color: #3785f6;
		width: 750rpx;
		height: 450rpx;
	}

	/* 导航栏样式 */
	.top {
		width: 750rpx;
	}

	.title_header {
		display: flex;
		padding-top: 60rpx;
	}

	.title_header>text {
		font-size: 35rpx;
		color: white;
		margin-left: 270rpx;
	}

	.jiantou {
		border-bottom: 6rpx solid white;
		border-left: 6rpx solid white;
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		transform: rotate(45deg);
	}

	/* 新增优惠卷样式 */
	.youhiujuan {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 70rpx;
		margin-top: 500rpx;
		background-color: white;
		position: relative;
		top: -700rpx;
		border-radius: 40rpx;
		width: 600rpx;
		height: 80rpx;
		color: #3785f6;
		margin-bottom: 50rpx;
	}

	.youhiujuan image {
		width: 30rpx;
		height: 30rpx;
		padding-right: 15rpx;
	}

	.add {
		font-size: 35rpx;
	}

	.cardContent {
		position: relative;
		top: -700rpx;
		border-radius: 100rpx;
	}

	.choose {
		background-color: white;
		height: 300rpx;
		width: 92%;
		margin: auto;
		border-radius: 10rpx;
		padding-top: 30rpx;
	}

	.card {
		position: relative;
		top: -200rpx;
	}

	/* 进行中已结束样式 */
	.rectangle {
		height: 40px;
		margin: 0 auto;
		width: 150px;
		background-color: pink;
		/* padding-top: 10px; */
		border-radius: 30px;
		text-align: center;
		line-height: 40px;
		border: 1px solid #eeeeee;
		/* margin-top: 10px; */
		z-index: 5;
	}

	.one {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #009AFF;
		color: #eeeeee;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}

	.two {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #eeeeee;
		color: #009AFF;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.item {
		color: #2276FF;
		background-color: #eeeeee;
		font-size: 16px;
	}

	.item.active {
		color: #eeeeee;
		background-color: #2276FF;
	}

	/* 展示内容(优惠卷)样式 */
	.content {
		width: 610rpx;
		margin-top: 30rpx;

	}

	.content-text1 {
		display: flex;
		margin-bottom: 40rpx;

	}

	.content-text1 .left {
		width: 190rpx;
		border: 1rpx #FFFFFF;
		border-radius: 7px 0 0 7px;
		background-image: linear-gradient(to bottom, #ff9272, #ff783a);
		color: white;
		padding-top: 30rpx;
		/* padding-left: 20rpx; */
		/* padding-bottom: 55rpx; */
	}

	.left .discount {
		font-size: 29rpx;
		text-align: center;
	}

	.left .money {
		margin-left: 20rpx;
		margin-top: 40rpx;
		display: flex;
	}

	.money .number {
		font-size: 78rpx;
	}

	/* 右边样式 */
	.content-text1 .right {
		width: 410rpx;
		background-color: #fff3eb;
		padding-top: 33rpx;
		padding-left: 17rpx;
		border: 1rpx #FFFFFF;
		border-radius: 0 7px 7px 0;
	}

	.right .discountname {
		font-weight: bold;
		color: black;
		padding-bottom: 8rpx;
	}

	.right .limitone {
		margin-top: 30rpx;
	}

	.content1 {
		width: 100%;
		margin-top: 30rpx;
	}

	.content-text11 {
		display: flex;
		margin-bottom: 40rpx;

	}

	.content-text11 .left1 {
		width: 190rpx;
		border: 1rpx #FFFFFF;
		border-radius: 7px 0 0 7px;
		background-image: linear-gradient(to bottom, #ffbb99, #ffbb99);
		color: white;
		padding-top: 30rpx;
		/* padding-left: 20rpx; */
		/* padding-bottom: 55rpx; */
	}

	.left1 .discount1 {
		font-size: 29rpx;
		text-align: center;
	}

	.left1 .money1 {
		margin-left: 20rpx;
		margin-top: 40rpx;
		display: flex;
	}

	.money1 .number1 {
		font-size: 78rpx;
	}

	/* 右边样式 */
	.content-text11 .right1 {
		position: relative;
		width: 410rpx;
		background-color: #f2f2f2;
		padding-top: 33rpx;
		padding-left: 17rpx;
		border: 1rpx #FFFFFF;
		border-radius: 0 7px 7px 0;
	}

	.right1 .discountname1 {
		font-weight: bold;
		color: #b8b8b8;
		padding-bottom: 8rpx;
	}

	.right1 .limitone1 {
		margin-top: 30rpx;
	}

	.right1 image {
		position: absolute;
		top: 120rpx;
		left: 250rpx;
		width: 120rpx;
		height: 70rpx;
		/* background-color: red; */
	}
</style>